<!doctype html>
<html lang="en">

	<head>

		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="Author" content="Yvette Lau">
		<meta name="viewport" content="width = device-width, initial-scale =1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<style type="text/css">
			.a{
				position: absolute;
				left:45%;
				top: 60%;
			}
			.b{
				position: absolute;
				left: 55%;
				top: 60%;
			}
		</style>
	</head>

	<body >
		<h1 style="text-align: center;margin-top:300px">我以后再生气你还哄我？</h1>
		<button type="button" class="a">不哄</button>
		
		<button type="button" class="b">哄</button>
	</body>
	<script type="text/javascript">
		$(".a").mouseover(function() {
			var site = Math.random() * (500 - 100) + 100;
			$(this).css({
				"top": site + "px",
				"left": site + "px"
			})
		})
		$(document).ready(function(){
  $(".b").click(function(){
   alert("ojbk"); 
  });
});
	</script>

</html>